<template>
  <div class="home">
    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
      </div>
      <div class="carousel-inner" >
        <div class="carousel-item active" data-bs-interval="2000">
          <img src="./../assets/VCG41149995513.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption d-none d-md-block" style="background-color: rgba(255,255,255,0.7); color:black">
            <h1>精于品，致于形，美于心</h1>
            <h2>款式简单大方，好搭配，厚薄度适中</h2>
          </div>
        </div>
        <div class="carousel-item"  data-bs-interval="2000">
          <img src="./../assets/VCG211168899669.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption d-none d-md-block" style="background-color: rgba(255,255,255,0.5); color:black">
            <h1>精于品，致于形，美于心</h1>
            <h2>款式简单大方，好搭配，厚薄度适中</h2>
          </div>
        </div>
        <div class="carousel-item"  data-bs-interval="2000">
          <img src="./../assets/VCG41182026001.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption d-none d-md-block" style="background-color: rgba(255,255,255,0.7); color:black">
            <h1>品质保证，坚持信念</h1>
            <h2>做工精细，款式简洁</h2>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
    <div class="content">
      <div class="row justify-content-center p-5">
        <div class="col-12 text-center p-2">
          <h1 style="color:#93d2f3;">今日推荐</h1>
          <h4 class="text-black-50">一件合适的衣服，可以带来更好的心情</h4>
        </div>
        <div class="col-4 row p-0">
          <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel col-12">
          <div class="carousel-inner">
            <div class="carousel-item active"  data-bs-interval="2000">
              <img src="./../assets/QJ6108283294.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item"  data-bs-interval="2000">
              <img src="./../assets/QJ6406630460.jpg" class="d-block w-100 h-100" alt="...">
            </div>
            <div class="carousel-item"  data-bs-interval="2000">
              <img src="./../assets/QJ6415402793.jpg" class="d-block w-100 h-100" alt="...">
            </div>
            <div class="carousel-item"  data-bs-interval="2000">
              <img src="./../assets/QJ6928070213.jpg" class="d-block w-100" alt="...">
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
        <div class="col-12" style="text-align: center;">
          <div class="row p-0 m-0">
            <span class="col-12 fs-3">--------------衣帽间--------------</span>
            <span class="col-12 fs-5">只要你来，我们就做！</span>
            <span class="col-12 fs-5 mt-3">可定制，联系客服：13678408077</span>
          </div>
        </div>
        </div>
        
        <div class="col-6">
          <div class="col-12 row p-0 m-0 justify-content-center" v-for="(item,index) in obj.slice(0,2)" :key="index" style="height: 300px;">
            <div class="col-4 row m-0 p-0">
              <img :src="item.goodsimg" height="300" class="col-12 m-0 p-0" alt="" @click="toabout(item)" style="cursor:pointer">
            </div>
            <div class="col-6 mt-4">
              <div @click="toabout(item)" style="cursor:pointer">
                <div class=""><span style="color: black;">{{item.goodsname}}</span></div>
                <div class=""><span>{{item.data}}</span></div>
                <div class="row mt-5">
                  <span class="col-12">原价：{{item.marketPrice}}</span>
                  <span class="col-12" style="color: red;">优惠价：{{item.goodsprice}}</span>
                  <sapn>浏览：{{item.browse}}    销量：{{item.salebrowse}}   好评：{{item.reception}}</sapn>
                  
                </div>
              </div>
              
              <div class="row">
                <button @click="add(item)" class="col-5">加入购物车</button> <button class="col-5" @click="pay(item)">立即购买</button>
              </div>
            </div>
            
          </div>
        </div>
        
      </div>
      <div class="row justify-content-center p-5 bg-secondary bg-opacity-10">
         <div class="sort row justify-content-center">
          <div class="col-12 row justify-content-center">
            <button @click="down(1)" :class="['col-3',ischeck1?'cs':'']">衬衫</button>
            <button @click="down(2)" :class="['col-3',ischeck2?'cs':'']">西装</button>
            <button @click="down(3)" :class="['col-3',ischeck3?'cs':'']">领带</button>
          </div>
          <hr>
          <div v-for="item in sort" :key="item" class="col-10 row p-0 m-3 bg-light">
            <div class="col-3 m-3 p-0">
              <img :src="item.goodsimg" height="350" width="300" alt=""  @click="toabout(item)" style="cursor:pointer">
            </div>
            <div class="col-7 m-2">
              <div  @click="toabout(item)" style="cursor:pointer">
                <div class="mt-2"><h2 style="color: black;">{{item.goodsname}}</h2></div>
                <div class="mt-5"><h4>{{item.data}}</h4></div>
                <div class="row mt-5">
                  <span class="col-12">原价：{{item.marketPrice}}</span>
                  <span class="col-6" style="color: red;">优惠价：{{item.goodsprice}}</span>
                  <sapn class="col-5 text-end">浏览：{{item.browse}}    销量：{{item.salebrowse}}   好评：{{item.reception}}</sapn>
                </div>
              </div>
              
              <div class="row mt-3">
                <button @click="add(item)" class="col-5">加入购物车</button> <button class="col-5" @click="pay(item)">立即购买</button>
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
    <div class="row justify-content-center text-center p-4 foot">
				<div class="col-12">
					合作伙伴
				</div>
				<div class="col-5 row justify-content-center m-2">
					<div class="col-1">
						<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-bag-plus-fill" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M10.5 3.5a2.5 2.5 0 0 0-5 0V4h5v-.5zm1 0V4H15v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4h3.5v-.5a3.5 3.5 0 1 1 7 0zM8.5 8a.5.5 0 0 0-1 0v1.5H6a.5.5 0 0 0 0 1h1.5V12a.5.5 0 0 0 1 0v-1.5H10a.5.5 0 0 0 0-1H8.5V8z"/>
</svg>
					</div>
					<div class="col-1">
						<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-bag-plus-fill" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M10.5 3.5a2.5 2.5 0 0 0-5 0V4h5v-.5zm1 0V4H15v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4h3.5v-.5a3.5 3.5 0 1 1 7 0zM8.5 8a.5.5 0 0 0-1 0v1.5H6a.5.5 0 0 0 0 1h1.5V12a.5.5 0 0 0 1 0v-1.5H10a.5.5 0 0 0 0-1H8.5V8z"/>
</svg>
					</div>
					<div class="col-1">
						<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-bag-plus-fill" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M10.5 3.5a2.5 2.5 0 0 0-5 0V4h5v-.5zm1 0V4H15v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4h3.5v-.5a3.5 3.5 0 1 1 7 0zM8.5 8a.5.5 0 0 0-1 0v1.5H6a.5.5 0 0 0 0 1h1.5V12a.5.5 0 0 0 1 0v-1.5H10a.5.5 0 0 0 0-1H8.5V8z"/>
</svg>
					</div>
					<div class="col-1">
						<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-bag-plus-fill" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M10.5 3.5a2.5 2.5 0 0 0-5 0V4h5v-.5zm1 0V4H15v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4h3.5v-.5a3.5 3.5 0 1 1 7 0zM8.5 8a.5.5 0 0 0-1 0v1.5H6a.5.5 0 0 0 0 1h1.5V12a.5.5 0 0 0 1 0v-1.5H10a.5.5 0 0 0 0-1H8.5V8z"/>
</svg>
					</div>
					<div class="col-1">
						<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-bag-plus-fill" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M10.5 3.5a2.5 2.5 0 0 0-5 0V4h5v-.5zm1 0V4H15v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4h3.5v-.5a3.5 3.5 0 1 1 7 0zM8.5 8a.5.5 0 0 0-1 0v1.5H6a.5.5 0 0 0 0 1h1.5V12a.5.5 0 0 0 1 0v-1.5H10a.5.5 0 0 0 0-1H8.5V8z"/>
</svg>
					</div>
					<div class="col-1">
						<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-bag-plus-fill" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M10.5 3.5a2.5 2.5 0 0 0-5 0V4h5v-.5zm1 0V4H15v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4h3.5v-.5a3.5 3.5 0 1 1 7 0zM8.5 8a.5.5 0 0 0-1 0v1.5H6a.5.5 0 0 0 0 1h1.5V12a.5.5 0 0 0 1 0v-1.5H10a.5.5 0 0 0 0-1H8.5V8z"/>
</svg>
					</div>
					<div class="col-1">
						<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-bag-plus-fill" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M10.5 3.5a2.5 2.5 0 0 0-5 0V4h5v-.5zm1 0V4H15v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4h3.5v-.5a3.5 3.5 0 1 1 7 0zM8.5 8a.5.5 0 0 0-1 0v1.5H6a.5.5 0 0 0 0 1h1.5V12a.5.5 0 0 0 1 0v-1.5H10a.5.5 0 0 0 0-1H8.5V8z"/>
</svg>
					</div>
					<div class="col-1">
						<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-bag-plus-fill" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M10.5 3.5a2.5 2.5 0 0 0-5 0V4h5v-.5zm1 0V4H15v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4h3.5v-.5a3.5 3.5 0 1 1 7 0zM8.5 8a.5.5 0 0 0-1 0v1.5H6a.5.5 0 0 0 0 1h1.5V12a.5.5 0 0 0 1 0v-1.5H10a.5.5 0 0 0 0-1H8.5V8z"/>
</svg>
					</div>
				</div>
				<div class="col-12">
					企业培训|合作事宜|版权投诉
				</div>
				<div class="col-12">
					翼ICP备123456789.2019-2025 chaoliuchuanda.Powered by chaopai
				</div>
			</div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name:'HomeView',
  data(){
    return{
      sort:[],
      obj:[],
      ischeck1:true,
      ischeck2:false,
      ischeck3:false,
      addgoods:{},
      about:'/about/'
    }
  },
  created(){
     axios.get(`http://127.0.0.1:4523/m1/1263105-0-default/good`).then(
        (res)=>{
          // console.log(res.data.obj)
          // console.log(this.$route.params.id)
          this.obj=res.data.obj;
          this.sort=this.obj.filter(item=>item.sort==="衬衫")
        }
      ).catch((error)=>{
        console.log(error)
      })
  },
  methods:{
    pay(x){
      if(!this.$store.state.userInfo.username){
        alert("请先登录！")
        this.$router.push({
            path: '/login'
        })
      }else{
        // console.log(x)
        this.$router.push({
            name:"order",
            params:{
              id:JSON.stringify([x])
            }
        })
      } 
      
        
    },
    toabout(x){
      this.$router.push({
          name:"about",
          params:{
            id:JSON.stringify(x)
          }
      })
    },
    down(x){
      if(x===1){
        this.ischeck1=true;
        this.ischeck2=false;
        this.ischeck3=false;
        console.log(this.ischeck1)
        this.sort=this.obj.filter(item=>item.sort==="衬衫")
      }else if(x===2){
        this.ischeck2=true;
        this.ischeck1=false;
        this.ischeck3=false;
        this.sort=this.obj.filter(item=>item.sort==="西装")
      }else if(x===3){
        this.ischeck3=true;
        this.ischeck1=false;
        this.ischeck2=false;
        this.sort=this.obj.filter(item=>item.sort==="领带")
      }
    },
    add(x){
      if(!this.$store.state.userInfo.username){
        alert("请先登录！")
        this.$router.push({
            path: '/login'
        })
      }else{
        this.$router.push({
            name:"cart",
            params:{
              id:JSON.stringify(x)
            }
        })
      }
      
    }
  }

}
</script>
<style>
.home a{
  text-decoration: none;
}
#carouselExampleControls{
  height: 300px;
}
   #carouselExampleIndicators img{
	height: 700px;
  }
  .home .foot{
    background-image: url(./../assets/bg.jpg);
  }
  .home .tj{
    background-image: url(./../assets/bg.jpg);
  }
	.home .content button{
    height: 40px;
    padding: 5px;
    margin-left: 5px;
    border-radius: 5px;
    color: rgb(75, 74, 74);
    border: none;
    background-color:#bce1f6;
  }
  .home .col-12 .cs{
    background-color: #70c7f5;
    color: white;
  }
  .home .content button:hover{
    background-color: #93d2f3;
    color: white;
    border: none;
  }
  .home a{
    text-decoration: none;
    color: black;
  }
  .home .row .col-5:nth-child(1){
    background-color: rgb(222, 218, 218);
    width: 100px;
  }
</style>
